<template>
  <view class="phxx-item-detail">
    <view class="content-box">
      <view class="bottom block-back">
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>供应商：</view>
          <view class="uni-form-value">{{ inputObj.supplierName }}</view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>产品类别：</view>
          <view class="uni-form-value">{{ inputObj.productType }}</view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>产品名称：</view>
          <view class="uni-form-value">{{ inputObj.proName }}</view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>产品价格：</view>
          <view class="uni-form-value">{{ inputObj.proPrice }}元/吨</view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>发热量：</view>
          <view class="uni-form-value"
            >{{ inputObj.calorificValue || 0 }}大卡</view
          >
        </view>
        <view class="uni-form-item">
          <view class="title">灰分：</view>
          <view class="uni-form-value">{{ inputObj.ashContent || 0 }}%</view>
        </view>
        <view class="uni-form-item">
          <view class="title">硫分：</view>
          <view class="uni-form-value">{{ inputObj.sulfurContent || 0 }}%</view>
        </view>
        <view class="uni-form-item">
          <view class="title">水分：</view>
          <view class="uni-form-value">{{ inputObj.hydration || 0 }}%</view>
        </view>
        <view class="uni-form-item">
          <view class="title">挥发分：</view>
          <view class="uni-form-value"
            >{{ inputObj.volatileMatter || 0 }}%</view
          >
        </view>
        <view
          class="uni-form-item"
          style="height: 220rpx; justify-content: flex-start"
        >
          <view class="title">化验单：</view>
          <image
            v-if="inputObj.assayReport"
            :src="inputObj.assayReport.url"
            @click="clickImg"
          ></image>
        </view>
        <view class="btns">
          <button type="default" @click="deleteTip()">删除</button>
          <button type="primary" @click="linkToEdit()">编辑</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { toast } from '@/utils/common';
import {
  getProductById,
  deleteProduct,
  getProductByEnterId
} from '@/api/product';
export default {
  data() {
    return {
      coalTypeList: [],
      inputObj: {
        supplierName: '',
        productType: '',
        proName: '',
        proPrice: '',
        calorificValue: '',
        ashContent: '',
        sulfurContent: '',
        hydration: '',
        volatileMatter: '',
        assayReport: null
      }
    };
  },
  async onLoad(option) {
    this.inputObj.id = option.id;
    await this.getProductByEnterId();
    this.getProductById();
  },

  methods: {
    clickImg() {
      uni.previewImage({
        urls: [this.inputObj.assayReport?.url]
      });
    },

    async getProductByEnterId() {
      const res = await getProductByEnterId();
      if (res?.code === 0) {
        this.coalTypeList = res?.data || [];
      } else {
        toast('请求失败');
      }
    },

    async getProductById() {
      try {
        const data = { id: this.inputObj.id };
        const res = await getProductById(data);
        if (res.code === 0) {
          const result = res.data;
          if (result) {
            result.productType = this.coalTypeList.find(
              (e) => e.code === result.productType
            )?.value;
          }
          this.inputObj = result;
        }
      } catch {
        return false;
      }
    },

    deleteTip() {
      uni.showModal({
        title: '系统提示',
        content: '确认删除该产品？',
        cancelText: '取消',
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) this.deleteProduct();
        }
      });
    },

    async deleteProduct() {
      const res = await deleteProduct(this.inputObj.id);
      if (res?.code === 0) {
        uni.redirectTo({
          url: '/packageB/pages/product/index'
        });
        toast('删除成功');
      } else {
        toast('删除失败');
      }
    },

    linkToEdit() {
      uni.setStorageSync('title', '编辑产品');
      uni.redirectTo({
        url: `/packageB/pages/common/product-editting/index?id=${this.inputObj.id}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.phxx-item-detail {
  padding-bottom: 163rpx;
  .btns {
    display: flex;
    button + button {
      margin-left: 17.78rpx;
    }
    button {
      width: 100%;
      line-height: 40px;
    }
  }
}

.uni-form-item image {
  margin-top: 30rpx;
  width: 266.67rpx !important;
  height: auto !important;
}

.phxx-item {
  width: 700rpx;
  padding: 10rpx 30rpx;
  box-sizing: border-box;
  margin: 20rpx auto 20rpx auto;
  border-radius: 20rpx;
  background: #fff;
  font-size: 26.66rpx;
  color: #000;
  .phxx-item-content {
    width: 644rpx;
    .bottom {
      padding: 10rpx 0 0 0;
      > .items {
        padding-bottom: 6rpx;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-top: 15px;
      }
      .btn {
        button {
          width: 100%;
          height: 40px !important;
          margin-top: 45px;
          line-height: 40px !important;
        }
      }
      .til {
        width: 150rpx;
        display: inline-block;
      }
      .val {
        margin-left: 30rpx;
        width: 75%;
        display: inline-block;
        border-radius: 5px;
        height: 30px;
      }
    }
  }
}
</style>
